<template>
  <!-- 容器 -->
  <el-container>
    <!-- 头部 -->
    <el-header>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="0">控制中心</el-menu-item>
        <el-menu-item index="1">客户管理</el-menu-item>
        <el-menu-item index="2">账户管理</el-menu-item>
      </el-menu>
    </el-header>
    <!-- 主要内容 -->
    <el-main>
      <!-- 路由出口 -->
      <router-view />
    </el-main>
  </el-container>
</template>

<script>
// @ is an alias to /src
import { Component, Vue } from "vue-property-decorator";

@Component({
  name: "home",
  components: {}
})
export default class Home extends Vue {
  activeIndex = "0";
  mounted() {}
  handleSelect(key) {
    let _this = this;
    if (key === "0") {
      _this.$router.push({ path: "/" });
    }
    if (key === "1") {
      _this.$router.push({ path: "customer" });
    }
    if (key === "2") {
      _this.$router.push({ path: "logos" });
    }
  }
}
</script>

<style lang="scss">
.el-header {
  padding: 0;
}
.el-main{
  padding: 0;
}
</style>
